$(function(){
          editormd.markdownToHTML("editormd-view", {
          htmlDecode      : "style, script, iframe",  // you can filter tags decode
          emoji           : true,
          taskList       : true,
          tex            : true,  // 默认不解析
          flowChart       : true,  // 默认不解析
          sequenceDiagram : true,  // 默认不解析
        });
    });
$(function (){
    $('.reference-link').each(function (){
        $(this).parent().css({
            'letter-spacing':'2px',
            'margin-bottom':'16px',
            'padding':'0',
        })
    })
})
function action_save(a_id,action){
    var dic ={'like':$('#LikeAction>svg'),'eye':$('#EyeAction>svg'),'collect':$('#CollectAction>svg')};
    $.ajax({
        url:'/article/article-action/',
        type:'POST',
        data:{'action':action,'a_id':a_id},
        success:function (resp){
            layer.msg(resp.msg,{time:1500},function (){
                if(resp.status !=='error'){
                    var tag = action.replace('un','')
                    if(tag === action){
                        dic[tag].attr('fill','red');
                    }else{
                        dic[tag].attr('fill','');
                    }
                }

            })
        }
    });
}
function like(a_id){
    var status = $('#LikeAction>svg').attr('fill');
    var action = null;
    const like_count_item = $('#like_count');
    const count = Number(like_count_item.text());
    console.log(like_count_item.text());
    console.log(count);
    if(status){
        action = 'unlike';
        action_save(a_id,action);
        like_count_item.text(count-1);
    }else{
        action = 'like';
        action_save(a_id,action);
        like_count_item.text(count+1);

    }


}
function eye(a_id){
    var status = $('#EyeAction>svg').attr('fill');
    var action;
    if(status){
        action = 'uneye';
    }else{
        action = 'eye';
    }
    action_save(a_id,action);
}

function collect(a_id){
    var status = $('#CollectAction>svg').attr('fill');
    var action;
    if(status){
        action = 'uncollect';
    }else{
        action = 'collect';
    }
    action_save(a_id,action);
}
const UserImage = $('#UserImg');

function comment_post_helper(a_id,u_name,imgData){
    let main = $('.is-8');
    let container = $('<div style="display: flex;justify-content: flex-start" id="commentInfo"></div>');
    let div = '<div class="form-group" style="margin: 0 0.8em;border: 1px dashed #a0a7b2"> ' +
        '<label style="padding: 0;margin: 0"> ' +
        '<input type="text" class="form-control" style="width: 600px;height: 78px"> ' +
        '</label> ' +
        '<button type="button" class="btn btn-primary" id="comment_post">发布</button>'+
        '</div> ';
    container.append(UserImage.clone(),div);
    main.append(container);
    $('#comment_post').attr('onclick','comment_post('+a_id+','+'"'+u_name+'"'+','+'"'+imgData+'"'+')');

}
let like_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16" style="padding-top: 2px">' +
    '                  <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"></path>' +
    '                </svg>';
function show(a_id,u_name,imgData){
    var commentInfo = document.getElementById('commentInfo');
    if(commentInfo) {
        commentInfo.remove();
        $('.comments').remove();
        $('#commentsNum').css('display','');
        $('#commentsAction').css('display','none');
    }else{
        comment_post_helper(a_id,u_name,imgData);
        $.ajax({
        url:'/comment/comment-show/',
        data:{'a_id':a_id},
        type:'POST',
        success:function (resp){
            var mainPart = $('.is-8');
            var itemscontainer = $('<div class="comments"></div>');
            mainPart.append(itemscontainer);
            for(var i=0;i<resp.data.length;i++) {
                let itemcontainer = $('<div class="comment-wrap"></div>');
                let now_time = new Date();
                let upload_time = new Date(resp.data[i].UploadTimeStr);
                let gap_s = new Date(now_time - upload_time);
                let gap_m = gap_s.getMinutes();
                let time_show = null;
                if (Math.floor(gap_s / 1000) < 60) {
                    time_show = '刚刚';
                } else if (Math.floor(gap_s / 1000 / 60) < 60) {
                    time_show = gap_m + '分钟前';
                }else if(Math.floor(gap_s /1000/60/60) < 24){
                    time_show = upload_time.getHours()+':'+upload_time.getMinutes();
            }else{
                    time_show = resp.data[i].UploadTimeStr;
                }
                let name = '<p style="margin-bottom: 8px;font-weight: bold;margin-top: 0">'+resp.data[i].AuthorInfo.username+'</p>';
                if(Boolean(resp.data[i].is_like)){
                    like_svg ='<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="red" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16" style="padding-top: 2px">' +
                    '                  <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"></path>' +
                    '                </svg>';
                }
                let imgcontainer = $('<div class="photo"></div>');
                let img = $('<img class="avatar" src="" alt="">');
                imgcontainer.append(img);
                let text = $('<div class="comment-block">' +
                    name+
                    '<p class="comment-text">'+resp.data[i].content+'</p>' +
                    '<div class="bottom-comment">' +
                    '<div class="comment-date">'+time_show+'</div>' +
                    '<ul class="comment-actions">' +
                    '<li class="comment-like">' +
                    like_svg+
                    '</li>' +
                    '<li class="reply">Reply</li>' +
                    '</ul>' +
                    '</div>' +
                    '</div>');
                itemcontainer.append(imgcontainer,text);
                $('.comments').append(itemcontainer);
                img.attr('src','../../'+resp.data[i].AuthorInfo.profile);
            }
        }
    })
        $('#commentsNum').css('display','none');
        $('#commentsAction').css('display','');
    }
}

function comment_post(a_id,u_name,imgData){
    let content =$('.form-control').val();
    if(content.length !== 0){
        $.ajax({
            url:'/comment/comment-post/',
            data:{'a_id':a_id,'content':content,'timestamp':Date.parse(new Date())},
            type:'POST',
            success:function (resp){
                if(resp.msg === 'success'){
                    $('.form-control').val("");
                    var commments = $('.is-8 .comments');
                    layer.msg(resp.msg,{time:1200},function (){
                        let name ='<p style="margin-bottom: 8px;font-weight: bold;margin-top: 0">'+u_name+'</p>';
                        let itemcontainer = $('<div class="comment-wrap"></div>');
                        let imgcontainer = $('<div class="photo">'+
                    '            <img class="avatar" src="data:;base64,' + imgData + '" alt="">' +
                    '        </div>');
                        let text = $('<div class="comment-block">' +
                                name+
                                '<p class="comment-text">'+content+'</p>' +
                                '<div class="bottom-comment">' +
                                '<div class="comment-date">刚刚</div>' +
                                '<ul class="comment-actions">' +
                                '<li class="comment-like">'+like_svg+'</li>' +
                                '<li class="reply">Reply</li>' +
                                '</ul>' +
                                '</div>' +
                                '</div>');
                        itemcontainer.append(imgcontainer,text);
                        commments.prepend(itemcontainer);
                    })
                }else{
                    alert('未知错误！');
                }
            }
        })
    }
}